
import React, { Component, PropTypes } from 'react';
import {
	Alert, Dimensions, Image,StyleSheet, Text, View, ScrollView, TouchableOpacity, Platform,
} from 'react-native';
import { MtContainer, MtChar, MtEdit, MtFixedButton, MtLabelBar, MtToast, MtPopupPicker,MtNavBar,
	MtSeparator, MtDateTimePicker, MtColor, MtActionButton, MtListView, MtEmptyView, MtInput, MtButton, MtLoadingModal } from 'martian-ui';
import {fetchDeviceList} from '../action/girlAction';
const DeviceCell = require('../components/DeviceCell');
import { bindActionCreators } from 'redux';
import dismissKeyboard from 'react-native/Libraries/Utilities/dismissKeyboard';
const { MtM3, MtL3, MtW1 , MtT0, MtT3} = MtChar;
import TipBar from '../components/TipBar';
import values from 'lodash/values';
import keys from 'lodash/keys';
import {connect} from 'react-redux';
const EntityLabels = require('../constants/entities');
import assign from 'lodash/assign';
import Register from '../container/Register';
import ForgetPassword from '../container/ForgetPassword';
import ScenceName from '../container/ScenceName';
import {login} from '../action/user';
const MtIcon = require('martian-icon');
import { modelToKeyString } from '../utils/modelToKeyString';
import YaguanHome from '../container/YaguanHome';
import {isMobile} from '../utils/validator';
import TabViewController from '../container/TabViewController';

class UselessTextInput extends Component {
	render() {
		return (
			<TextInput
				{...this.props} // 将父组件传递来的所有props传递给TextInput;比如下面的multiline和numberOfLines
				editable = {true}
				maxLength = {40}
			/>
		);
	}
}

class Login extends Component {
	constructor(props) {
		super(props)
		// 初始状态
		this.state = {
			isPasswordHide: true,
			mobile:'18606500590',
			password:'123456',

		}
	}



	render() {

		const  {navigator, login, loginIsFetching, assessToken} = this.props;
		const  {isPasswordHide, mobile, password} = this.state;

		return (
			<MtContainer>
				<MtLoadingModal
					visible={loginIsFetching}
					tip="登陆中.."
				/>
				<ScrollView>
					<View style={{ marginLeft: 30}}>
					<View style={{ flexDirection:'row', paddingTop: 100, alignItems:'center'}}>
						<Image source = {require('../img/logo_icon@3x.png')} style = {styles.logoIcon} />
						<MtT0 style={{ fontSize: 38}}>你好,</MtT0>
					</View>
					<MtL3 style={{ marginTop: 5}}>感谢你选择雅观智能，登录账号以使用完整功能</MtL3>
					</View>
					<View style={{ alignItems:'center'}}>
						<View style={{ width: 345, height: 295, marginTop: 30, backgroundColor: '#fff',}}>
							<View style={{ flexDirection: 'row', marginTop: 50, alignItems:'center'}}>
								<Image source = {require('../img/phong_icon@3x.png')} style = {styles.phong_icon} />
								<View style={{ flex: 1, backgroundColor: '#fff' }}>
									<MtInput
										ref={(input) => {
											this.searchInput = input;
										}}
										style={[styles.inputStyle]}
										defaultValue={undefined}
										underlineColorAndroid="transparent"
										placeholder="请输入手机号码"
										returnKeyType="default"
										onFocus={() => {
											this.setState({ focus: true });
										}}
										onBlur={() => this.setState({ focus: false })}
										onChangeText={(res) => {
											this.setState({mobile: res })

										}}
										onSubmitEditing={(event) => {
											if (event.nativeEvent.text && event.nativeEvent.text.length > 1) {
												dismissKeyboard();

											}
										}}
									/>
									<MtSeparator style={{ marginRight: 30 }} />
								</View>
							</View>
							<View style={{ flexDirection: 'row', marginTop: 20, alignItems:'center'}}>
								<Image source = {require('../img/password_icon@3x.png')} style = {styles.phong_icon} />
								<View style={{ flex: 1, backgroundColor: '#fff' }}>
									<MtInput
										ref={(input) => {
											this.searchInput = input;
										}}
										style={[styles.inputStyle]}
										defaultValue={undefined}
										underlineColorAndroid="transparent"
										placeholder="请输入密码"
										secureTextEntry={isPasswordHide}
										returnKeyType="default"
										onFocus={() => {
											this.setState({ focus: true });
										}}
										onBlur={() => this.setState({ focus: false })}
										onChangeText={(res) => {
											this.setState({password: res })
										}}
										onSubmitEditing={(event) => {
											if (event.nativeEvent.text && event.nativeEvent.text.length > 1) {
												dismissKeyboard();

											}
										}}
									/>
									<MtSeparator />
								</View>
								<View style={styles.passwordHideContainer}>
									<TouchableOpacity
										onPress={() => this.setState({ isPasswordHide: !isPasswordHide })}
										style={{ width: 38, height: 38, alignItems: 'center', justifyContent: 'center' }}
									>
										<MtIcon
											name={isPasswordHide ? 'hide' : 'display'}
											color="#8f8f8f"
											size={25}
										/>
									</TouchableOpacity>
								</View>
							</View>
							<TouchableOpacity
								onPress={()=>{
									navigator.push({
										component: ForgetPassword,
										params: {
											navigator,
										}
									})
								}}
							>
								<MtL3 style={{ color: '#00919A', alignSelf:'flex-end',paddingVertical: 20, paddingRight: 30}}>忘记密码?</MtL3>
							</TouchableOpacity>
							<View style={{ flex: 1, backgroundColor: '#fff', justifyContent:'center', alignItems: 'center', paddingBottom: 20 }}>
							<MtButton
								containerStyle={{
									borderRadius: 12,
									width: 200,
									height: 44,
									backgroundColor: '#35B8AC',
								}}

								onPress={() => {
									login(mobile, password).then((res)=>{
										MtToast.show('登录成功,欢迎进入雅观');
											navigator.resetTo({
												component: TabViewController,
												params: {
													assessToken,
													navigator,
												}
											})

									})



								}}
								disabled={!isMobile(mobile) || !password}
							>
								登录
							</MtButton>
							</View>
						</View>
						<View style={{ flex: 1,  justifyContent:'center', alignItems: 'center', marginTop: 20 }}>
							<Image source = {require('../img/logn_img@3x.png')} style = {styles.logn_img} />
							<View style={{ flexDirection:'row', alignItems: 'center', flex: 1 , marginTop: 70}}>
								<MtL3>还没有账号？</MtL3>
								<TouchableOpacity
									onPress={()=>{
										navigator.push({
											component: Register,
											params: {
												navigator,

											}
										})
									}}
								>
									<MtT3>点击注册 </MtT3>
								</TouchableOpacity>
							</View>
						</View>
					</View>

				</ScrollView>

			</MtContainer>
		);}
};


function mappingStateToProps(state, ownProps) {

	const entities= state['entities'];
	const isFetching= state['isFetching'];
	const loginIsFetching = isFetching['login'];
	const assessTokenEntity = entities[EntityLabels.token];
	const assessToken = assessTokenEntity && values(assessTokenEntity)[0].assessToken;

	return {
		loginIsFetching,
		assessToken
	}
}
function mapDispatchToProps(dispatch) {
	const actions = {
		login
	};
	return bindActionCreators(actions, dispatch);
}

module.exports = connect(mappingStateToProps, mapDispatchToProps)(Login);

const styles = StyleSheet.create({
	logoIcon:{
		width: 50,
		height: 50,
	},
	phong_icon:{
		width: 38,
		height: 38,
		marginHorizontal: 22,

	},
	logn_img:{
		width: 134,
		height: 34,
	},
	inputStyle: {
		height: 50,
		fontSize: 14,
		backgroundColor:'#fff'
	},
	passwordHideContainer: {
		alignItems: 'center',
		justifyContent: 'center',
		marginRight: 20
	},
});
